<route>
{
"meta":{
"title":"脚本调试"
}
}
</route>

<template>
  <div>
    <el-row :gutter="12" align="middle" type="flex">
      <el-col>脚本编码:{{ query.code }}</el-col>
      <el-col>脚本名称:{{ query.name }}</el-col>
      <el-col>脚本类型:{{ query.type }}</el-col>
      <el-col class="tr">
        <el-button style="margin-right: 15px" type="primary" @click="handleRun"
          >执行</el-button
        >
        <el-button type="primary" @click="handleSaveScript" plain
          >保存</el-button
        >
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <div class="mb40">
      <el-card>
        <div id="java"></div>
      </el-card>
    </div>
    请求参数(JSON)
    <pre class="f10 g9">
        {
      "modelCode": "string", //模型编码，仅type未PROCESS时有效
      "type":"TRIGGER",//枚举值 TRIGGER和PROCESS
      "values": {}//流程模型的值仅type未PROCESS时有效
       }
     </pre
    >
    <el-divider></el-divider>
    <div class="mb40">
      <el-card>
        <div id="json"></div>
      </el-card>
    </div>
    返回结构
    <el-divider></el-divider>
    <div class="mb40">
      <el-card>
        {{ returndata }}
      </el-card>
    </div>
    报错信息
    <el-divider></el-divider>
    <div class="mb40">
      <el-card>
        <pre>
              {{ errorMsg }}
          </pre
        >
      </el-card>
    </div>
  </div>
</template>
<script>
import { postHmscriptDebug,getHmscriptInfoCode,putHmscript } from '@/apis/paas/HmScriptController.js'
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
import MonacoEditorHint from "@/hint/monacoeditor";
MonacoEditorHint.init("java");
export default {
  async mounted() {
    this.dataCode = await getHmscriptInfoCode({ id: this.query.id });
    this.javaEditor = monaco.editor.create(document.getElementById("java"), {
      value: this.dataCode || "",
      language: "java",
    });
    this.jsonEditor = monaco.editor.create(document.getElementById("json"), {
      value: `{
"modelCode":"string",
"type":"TRIGGER",
"values":{}
}`,
      language: "json",
    });
  },
  data() {
    return {
      jsonEditor: null,
      javaEditor: null,
      query: this.$route.query,
      dataCode: "",
      errorMsg: "",
      queryData: {},
      returndata: "",
    };
  },
  methods: {
    async handleRun() {
      this.errorMsg = "";
      this.returndata = "";
      let errorjson = monaco.editor.getModelMarkers();
      if (errorjson.length > 0) {
        this.$message.error("json语法错误" + errorjson[0]?.message);
        return;
      }
      try {
        let map = JSON.parse(this.jsonEditor.getValue());
        this.queryData = Object.assign(
          { code: encodeURIComponent(this.javaEditor.getValue()) },
          map
        );
        postHmscriptDebug(this.queryData, { nomsg: true })
          .then((res) => {
            this.returndata = res;
          })
          .catch((error) => {
            this.errorMsg = error.message;
          });
      } catch (error) {
        this.$message.error("json错误");
      }
    },
    handleSaveScript() {
      const params = {
        id: this.query.id,
        content: encodeURIComponent(this.javaEditor.getValue()),
      };
      putHmscript(params).then((res) => {
        this.$message.success("操作成功");
      });
    },
  },
};
</script>
<style lang="scss" scoped>
pre {
  white-space: pre-line;
  word-wrap: break-word;
}

#java {
  height: 600px;
}

#json {
  height: 200px;
}
</style>
